<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作测试</title>
    <script>
        // js阻塞   DOM 树还没有形成
        // http -> file www.taobao.com
        // req res 200 html text/html 解析html DOMContentLoaded
        // 1. 尽快把静态网页显示 99 历史 猫 电话线 img src onload
        // js 阻塞 DOM树
        // document.addEventListener('DOMContentLoaded', () => {
        //     // // dom + css 结合完成了
        //     // console.log('DomContentLoaded')
        //     let oContainer = document.getElementById('container');
        //     console.log(oContainer);
        // }, false);
    </script>
</head>

<body>
    <div id="container"></div>
    <script>
        // // why? 怎么优化?
        // // 1.查找元素，可以单独提出来
        // document.addEventListener('DOMContentLoaded', () => {
        //     // dom + css 结合完成了
        //     console.log('DomContentLoaded')
        // }, false);
        // window.addEventListener('load', () => {
        //     // 各种资源都加载完了 js img src ......
        //     console.log('loaded')
        // }, false);
        let oContainer = document.getElementById('container');
        let content = '';
        for (var count = 0; count < 10000; count++) {
            content += '<span>我是一个小测试</span>';
        }
        oContainer.innerHTML = content;
    </script>
</body>

</html>